<template>
  <div class="group-category border-bottom-1px">
    <ul class="list" v-if="group.category">
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        @click="clickCategory(item)"
        :class="{'active': item.id === current}"
      >{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'GroupCategory',
  props: ['group'],
  computed: {
    list() {
      return [{ id: 0, name: '全部' }, ...this.group.category]
    }
  },
  data() {
    return {
      current: 0
    }
  },
  methods: {
    clickCategory(item) {
      this.current = item.id
      this.$emit('clickCategory', item.id)
    }
  }
}
</script>

<style scoped lang="stylus">
.group-category
  background white
  height 45px
  line-height 45px
  .list
    margin 0 10px
    //background blue
    overflow-y auto
    white-space nowrap
    text-align left
    .list-item
      display inline-block
      margin-right 10px
      font-weight 700
      padding 0 5px
      &.active
        font-weight 700
        color $main_color
</style>
